01-overview

基础广度笔记

Ajax Fetch Axios的区别

三者都用于网络请求，但是是不同维度

Ajax 是一种技术统称，asynchronous javascript and xml的首字母缩写

Fetch 是一个具体的API, 控制台可以打印

Axios 是一个第三方库，最常用的网络请求lib，可以用XMLHttpRequest和Fetch实现

用XML实现Ajax

用Fetch实现Ajax

浏览器原生API 和XMLHttpRequest一个级别，语法更加简洁易用，支持promise

lib和API区别

lib: 第三方库，一般需要基于原生api实现

API：是原生函数

实际项目中，使用现成的lib，可以大大提高效率

防抖节流

拖拽-移动节点
点击-更多操作
									
防抖关注结果，节流关注过程， 实际过程使用lodash的防抖节流就好了

评论
					
		点击-更多操作

		展开折叠

防抖：限制执行次数，多次密集触发只执行一次

代码实现：

eg: 下载按钮/输入搜索框连续输入搜索内容。连续同一动作发生频次次在指定时间内，会执行最后一次动作

节流 : 限制执行频率，有节奏的执行

代码实现：

节省交互沟通，流不一定是流量哈

eg: 窗口大小调整/drag/scroll。连续同一动作发生，指定时间内触发一次。一个一个来，按时间节奏

px % em rem vw/vh 有什么区别

px是基本单位，绝对单位，宽度大小固定的，其他都为相对单位

%相对父元素宽度的百分比

em相对于当前元素的font-size

rem相对根节点(html)的font-size

vw相对于屏幕宽度的百分之1

vh相对于屏幕高度的百分比之1

vmin vw和vh两者最小值 vmax两者的最大值

eg: width: 100px; heigth: 100%; margin-top: 2em; margin-bottom: 3rem; height: 10vh; width: 20vw;width: 10vmin;height: 20vmax;

箭头函数

缺点

没有arguments, 普通函数默认有arguments

不能用call apply bind 改变this指向，this指向自己的父作用域

不能使用箭头函数的情况

TCP三次握手和四次挥手

for in for of 区别

https://www.jb51.net/article/86076.htm

区别

for await of有什么作用

offsetHeight clientHeight scrollHeight scrollTop

https://blog.csdn.net/qq_35430000/article/details/80277587

HTMLCollection 和NodeList区别

computed 和watch

computed缓存原理

https://zhuanlan.zhihu.com/p/53219652

computed 和 watch 原理

https://juejin.cn/post/6877451301618352141

https://juejin.cn/post/6877469665539391495

computed有缓存 method没有缓存

vue 组件通讯方式

vuex mutation 和 action 区别

严格模式

请求为什么要发送options

经常会遇到跨域的情况，所以先发送method为options的请求，看服务器返回什么跨域信息。

跨域

如何跨域

JSONP

CORS

深度笔记

垃圾回收

垃圾回收利用什么算法

之前：引用计数没有被引用就清除但是循环引用的情况会有缺陷

现在：标记清除会定时循环根 window对象，看是否还有标记，没有就会清除

闭包是内存泄漏吗？

不符合预期，没有被销毁的才是内存泄漏

虽然闭包不会被垃圾机制回收，但是闭包是符合我们的预期，不被销毁的，所以闭包不是内存泄漏

JS内存泄漏如何检测

使用performance检测，看是否某个地方突然内存增加很多并且没有减回去

正常的情况是上下上下，内存增加销毁增加销毁

内存泄漏场景

weakSet weakMap

weakSet weakMap 为弱引用，他们的实例不会妨碍垃圾回收，所以非常适合保存关联元数据。

set map

https://juejin.cn/post/7104828155340750885#heading-9

vdom

virtual DOM 虚拟dom 用js对象模拟DOM节点数据 react最先推广使用

for和forEach哪个快

nodejs 如何开启进程进程如何通讯

进程process vs 线程thread

JS Bridge

requestAnimationFrame vs requestIdleCallback 区别

都是宏任务

vue-router

vue-router 三种模式

webhistory

eg: /about /index

location.history

hash

eg: #/index #/about

hash.

abstract history

vue2 vue3 react diff算法的区别

diff算法介绍

tree diff的优化

vue2 vue3 react diff 区别

区别

react 仅右移

vue2 双端比较

vue3 最长递增子序列

vue生命周期都做了啥

知识广度

移动端H5点击有300ms延迟，如何解决？

fastClick

网络请求中，token和cookie的区别

介绍

浏览器存在用户端的一小段文本文件，纯文本格式

时效性: 如果没有设置expires属性，会话结束(关闭浏览器)cookie失效

cookie.set(name, value, {expires: 天数/未来某个时间挫})； cookie.get(name); cookie.remove(name)

跨域传递cookie

现代浏览器禁止第三方cookie

cookie和session

cookie和token

session 和JWT那个更好？

session

JWT

场景推荐

sso单点登录

介绍：指在多系统应用群中登录一个系统，便可在其他所有系统中得到授权而无需再次登录，包括单点登录与单点注销两部分

基于cookie

主域名完全不同，则cookie无法共享可使用SSO技术方案 eg: 滴滴

了解即可： OAuth 2.0 第三方验证登录要考虑该规范 eg:微信扫码登录

HTTP协议和TCP UDP协议

网络协议

HTTP协议 1.0、1.1、2.0有什么区别

HTTP 1.0

基本淘汰了基本的

HTTP 1.1

现在用的最多拓展功能性

HTTP 2.0

需要普及优化使用

什么是HTTPS中间人攻击如何预防

前端攻击及预防

XSS cross site script 跨站脚本攻击

vue 和react 默认规避了xss攻击，除了v-html dangerouslySetInnerHTML 内部都有做预防措施

eg: 评论，用户输入有可执行代码<script>alert(1111)</script>, 调接口保存成功，其他用户打开评论页面，后端返回评论详情有可执行代码，页面渲染过程中就会执行攻击代码

CSRF cross site request forgery 跨站请求伪造

点击劫持 click jacking

DDoS

SQL注入

prefetch 和 dns-prefetch 有什么区别

答案

preload 和 pretch

dns-prefetch 和 preconnet

dns 解析：相当于把域名解析为访问的ip地址

websocket 和http区别

websocket

websocket 和长轮询的区别

从输入url到网页显示的完整过程

答案

网络请求

DNS查询到IP，建立TCP链接(三次握手)

浏览器发起HTTP请求

服务器响应，浏览器收到请求响应，得到HTML源代码

解析

解析HTML过程，遇到静态资源会继续发起网络请求

JS CSS 图片视频等

注意：静态资源可能会有强缓存，此时不用请求

解析：字符串==》结构化数据无需深入

渲染

其他资料

重绘repaint vs 重排reflow

触发

重绘

重排

重绘和重排区别

减少重排的方法

触发BFC的条件

创建文档碎片

createDocumentFragment

如何实现网页多标签tab通讯

场景说明

tab1 列表页待处理数量和详情页待处理数量同步统一

使用WebSocket

无跨域限制，但是需要服务端支持，成本高

通过localStorage

同域通讯 localstorage 跨域不共享

通过SharedWorker

必须是同域，跨域用websocket

比较

网页和iframe如何通讯

index.html

child.html

Koa2

H5很慢，如何定位

答案

识别问题方向

前端性能指标

测评工具

chrome devTools

lightHouse

对症下药

在工作中遇到什么难题，怎么解决的

答案模板

个人案例

sm2加密

纯前端表格下载 + 合并单元格

实时广播：本地录音+ws实时传输音频流

高质量代码

手写一个js函数，实现数组扁平化ArrayFlatten

思路

实现1 使用push

实现2 使用concat

数组深度扁平化实现

手写一个getType函数，传入任意变量，可准确获取类型

要求

实现

new一个对象的过程是什么，手写代码表示

Object.create 和{} 有什么区别

遍历DOM树

问题

答案

深度优先不用递归可以实现吗？

可以，用栈，递归的本质就是栈

手写LazyMan （待学习）

函数柯里化，手写curry函数（待学习）

instanceof 的原理

bind

bind介绍

手写实现

call apply

分析

call

apply

event-bus

思路分析

实现

on once 一起存储

on once 分开存储

LRU缓存（待学习 lru2）

分析思路

手写深拷贝函数，考虑Map Set 和循环引用（待学习 lru2）

分析及解决问题思路

['1','2','3'].map(parseInt)

以下代码输出什么

代码执行结果

注意

答案

arr to tree 手写convert函数，将数组转为树

需求

思路

实现

new map .set .get

{} obj['key']

tree to arr

需求

实现

思路

广度优先 queue 先进先出 map

深度优先，递归

深度优先， stack 先进后出

promise.then 代码题

问题

分析

react中，setState

问题

答案

setState是微任务还是宏任务

分析

答案

对象和属性的连续赋值

了解

答案

数据结构和算法

复杂度时间复杂度空间复杂度

复杂度

时间复杂度

空间复杂度

旋转数组K步

方法一：pop + shift 复杂度O(n) 不推荐

方法二：slice + concat 复杂度O(1) 推荐

总结比较

判断字符串是否括号匹配

需求及说明

实现

分析

两个栈实现一个队列

队列和栈

实现

add delete length

分析

定义一个JS函数，反转单向链表

链表

链表vs数组

思路

实现

链表和数组哪个实现队列更快？？

分析

队列：先进先出的存储结构

链表实现及性能比较

性能分析

用js实现二分查找

思路

循环二分查找

递归二分查找

性能

循环只调用一次函数递归调用多次函数，调用函数也需要开销，但是影响不大递归理解更容易

找出一个数组中和为n的两个数

双层循环

双指针

性能对比

求一个二叉搜索树的第K小值

分析

实现

二叉树遍历：前序中序后序使用中序获取从小到大的数组后获取对应k-1下标对应的值

为什么二叉树很重要

目的

平衡二叉树

红黑树

B树

总结

堆栈模型堆有什么特点和二叉树有什么关系

了解

堆

堆的特点、和二叉树关系

和二叉树比较

求斐波那契数列的第n个值

介绍

递归

不建议复杂度高

循环

总结

青蛙跳台阶一次可以跳一级也可以跳两级跳到n级台阶有几种方式

将数组中的0移动到末尾

要求

传统思维

双指针

划重点

查找字符串中连续出现次数最多的字符

要求

传统思路

双指针

其他

js实现快速排序，并说明时间复杂度

思路

实现

splice 改变原数组，for循环不能用length 用改变后数组arr.length

slice 不改变原数组，返回新数组，注意===midValue值忽略

总结

找到0到10000之间的所有对称数（回文）

要求

思路

实现

数组反转

字符串前后比较

翻转数字

比较

高效的字符串前缀匹配

要求

思路

常规思路

优化

分析

数字千分位格式化

要求

常见思路

实现

使用数组

字符串

分析

切换字母大小写

要求

常见思路

实现

正则

ASCII 编码

重点

为何0.1+0.2！=0.3

分割线----------------------以下为自己刷到的题

实现一种算法，找出单向链表中倒数第 k 个节点。返回该节点的值

要求

实现

快慢指针，

先让快指针做k步，慢指针是从快指针数起第k+1个。再让它们同时移动，当fast指向null，就是指向尾部数起第-1个，slow刚好是倒数第k个

交替合并字符串

要求

实现

项目设计

如何设计一个前端统计SDK

分析功能范围

代码实现

sourcemap 的作用及配置

作用

配置

SPA 和 MPA应该如何选择

名词解析 SPA MPA

SPA

MPA

如何选择

设计一个H5编辑器的数据模型和核心功能

h5编辑器及设计要求

答案

点击保存按钮，组件属性的数据结构该如何设计？如何保证画布和属性面板的信息同步？

如果再扩展一个图层面板，vuex如何设计数据？

总结

设计一个 ”用户-角色-权限“ 模型

例如一个博客管理后台

RBAC

划重点

Hybrid模板的更新流程

流程

App何时下载新版本

开发一个H5抽奖页，你需要哪些后端api

梳理业务

整个流程：什么人做啥目的闭环

答案

如果你是前端负责人，将如何做技术选型

技术选型，选什么？

技术选型的依据

划重点

设计实现一个H5图片懒加载SDK

分析

实现

code review

code review 内容

code review 时机

其他

如何学习一门新语言需要考虑哪些方面

考虑内容

你觉得自己还有哪些不足

经验之谈

H5页面如何进行 “首屏” 优化

答案

路由懒加载

服务端渲染SSR

成本也比较高

App预取

图片懒加载

Hybrid

划重点及拓展

后端一次性返回10w条数据，你该如何渲染

设计不合理

自定义中间层 nodejs

虚拟列表

划重点

前端常用的设计模式有哪些？对应的使用场景是什么

答案

设计原则

工厂模式

单例模式

代理模式

观察者模式

发布订阅模式

装饰器模式

可以看看阮一峰的介绍

观察者模式和发布订阅模式区别

实际工作中，做过哪些vue优化

答案

+积累的业务上的优化

v-if 和 v-show

v-for 使用key

使用computed缓存

keep-alive缓存组件

异步组件

defineAsyncComponent

路由懒加载

服务端渲染SSR

使用vue遇到过哪些坑

内存泄露

vue2响应式的缺陷

vue3不会出现了，vue3用了proxy

路由切换时scroll到顶部

点击下一页返回时保持页面的滚动位置

其他方案

keep-alive 包裹，缓存组件

使用history模式 scrollBehavior

实际工作中，做过哪些react优化

修改CSS模拟v-show

循环使用key

使用Fragment(空标签包裹)减少层级

JSX中不要定义函数

构造函数中bind this

使用shouldComponentUpdate

如何统一监听Vue组件报错

答案

window.onerror

errorCaptured 生命周期

errorHandler

如果H5很慢，你该如何排查性能问题

先沟通，看是加载慢还是用户操作的时候很慢

前端性能指标

日常积累

图标

图片图标

字体图标

flex

babel

babel是一个转译器，是一个利用AST将高版本js转化成指定版本的工具

code===>AST====>code 有三个过程：解析=》转换=》再建

解析：把字符串解析为AST 过程中同时会进行语法的正确性校验

转换：遍历整个AST抽象语法树，对AST进行转换

再建：再次递归新的AST，根据变换后的AST再生成代码字符串

webpack entry output mode external loader plugin 等

entry：入口文件

spa

mpa

output：打包设置

打包后文件名filename 打包的dist文件的文件目录path

mode: 模式 development, production 或 none

external: 外部脚本库， webpack碰到该库，不将它进行打包处理，而是由应用自行引入脚本

loader

loader它只专注于转化文件(transform)这一个领域,完成压缩,打包,语言翻译;

loader运行在打包文件之前(loader为在模块加载时的预处理文件)

常用的loader

plugin

plugin不仅只局限在打包,资源的加载上,还可以打包优化和压缩,重新定义环境变量等

plugins在整个编译周期都起作用

devServer

loader 和 plugin 的区别

webpack 和 grunt gulp 的区别

for forEach 区别

for方法跳出循环-----continue跳过当次循环 break跳出循环不能用return 会报错

forEach------return 跳过当前循环 try...catch 包裹抛出错误即可跳出循环

for和forEach的区别

UDP 和 TCP有什么区别

cookie 和 session

https://www.csdn.net/tags/NtTacgxsMTQyOTgtYmxvZwO0O0OO0O0O.html

session

共同点

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别

储存位置不同：cookie是保存在客户端；session是保存在服务器端

安全性：cookie是保存在客户端容易被篡改，安全性低；session保存在服务端，以 id: 值的形式保存，id作为cookie返回给客户端，安全性更高些。

cookie有大小限制，不超过4kb左右

session会比较占用服务器性能，当访问增多时应用cookie

localStorage 和 sessionStorage

cookie大小被限制在4KB， Web Storage官方建议为每个网站5MB。

Web Storage是网页存储的总称，由 localStorage 和 sessionStorage 组成

localStorage

sessionStorage

常用api

模块化的前世今生

历史流程

全局函数

对象封装

匿名函数自调用

现代模块化规范

规范

commonjs

AMD

UMD

关于license开源协议

使用指南

快捷键

视图切换

你可以在大纲笔记和思维导图之间互相切换

常用功能

视图切换

编辑大纲笔记

使用菜单

拖拽移动节点

展开/折叠节点

进入某个节点

更多帮助

在线值班号